<template>
  <div class="favor">
    <nav-bar left-text="旅途">
      <template #title>
        <van-tabs v-model:active="active" type="card" shrink>
          <van-tab v-for="item in titles" :title="item" :key="item"></van-tab>
        </van-tabs>
      </template>
    </nav-bar>

    <!-- 我的收藏 -->
    <div class="my-favor" v-show="active === 0">
      <van-tabs v-model:active="activeName">
        <van-tab title="房屋" name="house">
          <div class="content">
            <template v-for="(item, index) in favorList" :key="index">
              <house-list-item :item-data="item" />
            </template>
          </div>
        </van-tab>
        <van-tab title="房东" name="landlord">
          <no-data />
        </van-tab>
      </van-tabs>
    </div>

    <!-- 浏览历史 -->
    <div class="history" v-show="active === 1">
      <div class="content">
        <template v-for="(item, index) in favorHistory" :key="index">
          <house-list-item :item-data="item" />
        </template>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref } from 'vue'
  import { storeToRefs } from 'pinia'

  import NavBar from '@/components/nav-bar/nav-bar.vue'
  import HouseListItem from './cpns/house-list-item.vue'
  import NoData from './cpns/no-data.vue'

  import useFavorStore from '@/stores/modules/favor'

  const active = ref(0)
  const titles = ["我的收藏", "浏览历史"]
  const activeName = ref("house")

  // 发送网络请求
  const favorStore = useFavorStore()
  favorStore.fetchFavorList()
  favorStore.fetchFavorHostory()
  const { favorList, favorHistory } = storeToRefs(favorStore)
</script>

<style lang="less" scoped>
  .content {
    margin-top: 10px;
    padding: 10px 20px 55px 20px;
  }
</style>